<template>
	<view>
		<!-- 导航栏 -->
		<view class="navBar">
			<view class="left">学生网络论坛平台</view>
			<view class="right" @click="toSearch">
				<input type="text" value="" placeholder="请输入你的关键词"/>
				<icon type = "search" size="35rpx" color="#1296db"></icon>
			</view>
		</view>
		<!-- 帖子列表 -->
		<view class="postList">
			<view class="postItem" v-for="(post,index) in posts" :key="index" @click="toPostDetail(post.postId)">
				<view class="postTitle">{{ post.title }}</view>
				<view class="postMeta">
					<text>作者ID: {{ post.userId }}</text><br>
					<text>发表时间: {{ formatDate(post.createdAt) }}</text>
				</view>
				<view class="postContent">{{ post.content }}</view>
			</view>
		</view>
		<!-- 加载更多 -->
		<uni-load-more :status="status" :icon-size="16" :content-text="contentText"></uni-load-more>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				token: '',
				posts: [],
				pageNum: 1,
				pageSize: 6,
				totalPage: 0,
				status: "no-more",
				contentText: {
					contentdown: "上拉加载更多",
					contentrefresh: "正在加载",
					contentnomore:"没有更多数据"
				}
			}
		},
		onPullDownRefresh() {
			console.log("下拉刷新");
			this.posts = [];
			this.pageNum = 1;
			this.getPosts();
		},
		onReachBottom() {
			console.log("上拉触底");
			if(this.pageNum > this.totalPage) {
				uni.showToast({
					icon: "none",
					title: '没有下一页数据了'
				});
				this.status = "no-more"
			} else {
				console.log("有下一页数据");
				this.pageNum++;
				this.getPosts();
			}
		},
		onLoad() {
			this.token = uni.getStorageSync("token");
			this.getUserInfo();
			this.getPosts();
			this.getTotalPage();
			uni.startPullDownRefresh();
		},
		methods: {
			getPosts() {
				this.status = '正在加载';
				const token = this.token;
				if(!token) {
					uni.showToast({
						icon: "none",
						title: "请先登录",
					});
					return;
				}
				uni.request({
					url: "http://localhost:8080/getPostList",
					method: "GET",
					data: {
						pageNum: this.pageNum,
						pageSize: this.pageSize
					},
					header: {
						'Authorization':token
					},
					success: (res) => {
						uni.stopPullDownRefresh();
						this.posts = res.data.data.records;
						console.log("posts:",this.posts);
					},
					fail: () => {
						uni.showToast({
							icon: "none",
							title: "网络错误"
						});
					},
				});
			},
			getTotalPage() {
				this.status = '正在加载';
				const token = this.token;
				if(!token) {
					uni.showToast({
						icon: "none",
						title: '请先登录'
					});
					return;
				}
				uni.request({
					url: "http://localhost:8080/getPostTotalPage",
					method: "GET",
					data: {
						pageNum: this.pageNum,
						pageSize: this.pageSize,
					},
					header: {
						'Authorization':token
					},
					success: (res) => {
						console.log("res.data:",res.data);
						console.log("res.data.data.pages:",res.data.data.pages);
						this.totalPage = res.data.data.pages + 1;
					},
					fail: () => {},
					complete: () => {}
				});
			},
			toPostDetail(id) {
				uni.navigateTo({
					url: '/pages/detail/detail?id=' + id,
				});
			},
			toSearch() {
				uni.navigateTo({
					url: '/pages/search/search',
					success: res => {},
					fail:() => {},
					complete: () => {}
				});
			},
			formatDate(date) {
				const options = {
				      year: 'numeric',
				      month: 'long',
				      day: 'numeric',
				      hour: '2-digit',
				      minute: '2-digit',
				      hour12: false // 使用24小时制
				    };
				return new Date(date).toLocaleDateString(undefined, options);
			},
			getUserInfo() {
				this.status = '正在加载';
				const token = this.token;
				if(!token) {
					uni.showToast({
						icon: "none",
						title: '请先登录'
					});
					return;
				}
				uni.request({
					url: "http://localhost:8080/getUserInfo",
					method: "GET",
					header: {
						'Authorization':token
					},
					success: (res) => {
						console.log("res.data.data:",res.data.data);
						uni.setStorageSync("user", res.data.data);
					},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>


<style scoped lang="scss">
	.navBar {
		height: 250rpx;
		background-color: white;
		padding: 0 30rpx;
		padding-top: 20rpx;
		/* #ifdef MP-WEIXIN */
		padding-top: 100rpx;
		/* #endif */
		overflow: hidden;
		background: linear-gradient(to bottom, #1296db, #f7f7f7);
		.left {
			flex: 1;
			color: white;
			font-size: 40rpx;
			font-weight: 700;
		}
		.right {
			position: relative;
			margin-top: 20rpx;
			flex: 2;
		}
		input {
			padding: 10rpx 0rpx;
			padding-left: 60rpx;
			border: 1rpx solid #ccc;
			border-radius: 50rpx;
			font-size: 30rpx;
			background-color: white;
		}
		icon {
			position: absolute;
			left: 20rpx;
			top: 16rpx;
		}
	}
	.postList {
		padding: 0 20rpx;
		.postItem {
			margin-bottom: 20rpx;
			padding: 20rpx;
			background-color: #fff;
			border-radius: 10rpx;
			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
			.postTitle {
				font-size: 36rpx;
				font-weight: bold;
				margin-bottom: 10rpx;
			}
			.postContent {
				font-size: 30rpx;
				color: #666;
				margin-bottom: 10rpx;
				white-space: pre-line;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 3; /* 控制行数 */
				-webkit-box-orient: vertical;
			}
			.postMeta {
				font-size: 24rpx;
				color: #999;
			}
			.viewMore {
				font-size: 28rpx;
				color: #1296db;
				text-align: right;
				margin-top: 10rpx;
				cursor: pointer;
			}
		}
	}
</style>